<template>
	<view class="order-modify-container">
		<view class="order">
			<view>
				<uv-text text="服务时间" size="14" bold block></uv-text>
				<uv-text :text="orderInfo.service_time" size="13" block></uv-text>
			</view>
			<view>
				<uv-button text="修改" size="mini" plain type="error" @click="modifyServiceTime"></uv-button>
			</view>
		</view>
		<view class="order">
			<view>
				<uv-text text="服务地址/联系人" size="14" bold block></uv-text>
				<uv-text :text="orderInfo.address_storey +' '+ orderInfo.address_house_number" size="13" block></uv-text>
				<uv-text type="info" :text="orderInfo.address_name +' '+orderInfo.address_tel" size="11" block></uv-text>
			</view>
			<view>
				<uv-button text="修改" size="mini" plain type="error" @click="modifyServiceAddress"></uv-button>
			</view>
		</view>
		<!-- 修改规则 -->
		<view class="rules-section">
			<uv-text text="修改订单信息规则" bold></uv-text>

			<view class="rule-item">
				<uv-text type="warning" bold text="修改服务时间"></uv-text>
				<uv-text type="info" size="small" block text=" (1) 仅支持订单开始前30分钟外修改1次;">
				</uv-text>
				<uv-text type="info" size="small" block text=" (2) 可修改时间范围:在优惠券可用时间范围内;">
				</uv-text>
				<uv-text type="info" size="small" block text="(3) 修改订单信息可能出现补/退差价情况;">
				</uv-text>
			</view>

			<view class="rule-item">
				<uv-text type="warning" bold text="修改服务地址"></uv-text>
				<uv-text type="info" size="small" block text="(1) 支持服务开始前30分钟外的订单，用户线上修改1次;">
				</uv-text>
				<uv-text type="info" size="small" block text="(2) 如需修改上门服务时间前30分钟内的订单服务地址，请直接联系门店进行沟通;">
				</uv-text>
				<uv-text type="info" size="small" block text="(3) 用户修改地址后取消订单，不收取额外费用;">
				</uv-text>
			</view>
		</view>
		<uv-popup ref="popTimeRef" mode="bottom" round="10">
			<visitTime @btnClick="selectTime"></visitTime>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import dayjs from 'dayjs'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getServiceInfo, modifyOrder
	} from '@/api'
	import {
		useRefreshStore
	} from '@/store'
	const refreshStore = useRefreshStore()
	import visitTime from './components/visitTime.vue'
	const orderInfo = ref({})
	onLoad(async (option) => {
		if (option.id) {
			orderInfo.value = (await getServiceInfo({
				order_id: option.id
			})).result
		}
	})
	const popTimeRef = ref(null);
	const modifyServiceTime = () => {
		popTimeRef.value.open();
	}
	const selectTime = (e) => {
		popTimeRef.value.close();
		uni.showModal({
			title: '提示',
			content: '确认修改服务时间吗？',
			success: async (res) => {
				if (res.confirm) {
					orderInfo.value.service_time = e;
					let res = await modifyOrder({ id: orderInfo.value.id, type:1, edit_service_time: orderInfo.value.service_time })
					if (res.code == 200) {
						refreshStore.setRefresh(true)
						uni.showToast({
							title: '修改服务时间成功',
							icon: 'success'
						})
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							confirmText: '知道了'
						})
					}
				}
			}
		})
	}
	// 修改服务地址
	const modifyServiceAddress = () => {
		uni.navigateTo({
				url: '/pages-user/address?selAddress=1',
				events: {
					// 定义接收事件
					acceptAddress: async (data) => {
						let res = await modifyOrder({ id: orderInfo.value.id, type:2, edit_address_id: data.id })
						if (res.code == 200) {
							orderInfo.value.address.id = data.id;
							orderInfo.value.address.name = data.name;
							orderInfo.value.address.tel = data.tel;
							orderInfo.value.address.province = data.province;
							orderInfo.value.address.city = data.city;
							orderInfo.value.address.area = data.area;
							orderInfo.value.address.address = data.address;
							refreshStore.setRefresh(true)
							uni.showToast({
								title: '修改服务地址成功',
								icon: 'success'
							})
						} else {
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: false,
								confirmText: '知道了'
							})
						}
					}
				},
				success: (res) => {
					// 可选：打印事件通道
					console.log(res.eventChannel)
				}
			})
	};
</script>

<style lang="scss" scoped>
	.order-modify-container {
		background-color: #fff;
	}

	.order {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
	}

	.address-info {
		padding: 4px 0;
	}

	.contact {
		color: #999;
		font-size: 12px;
		margin-top: 4px;
	}

	.rules-section {
		padding: 16px;
	}

	.rule-item {
		margin-top: 12px;
		padding: 12px;
		background-color: #f7f8fa;
		border-radius: 8px;
	}

	.rule-item ::v-deep .uv-text {
		line-height: 1.6;
	}
</style>